<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>所有新闻</title>
	<link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../css/news_list.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
	<div id="app">
		<div class="header">
			<div class="header_left">
				<img src="../img/main/招聘会.png"	>
				<a href="./main.html">&nbsp;校园兼职管理</a>
			</div>
			<div class="header_center">
				<ul>
					<li ><a href="./main.html">主页</a></li>
					<li><a href="./work_list.html">职位</a></li>
					<li><a style="color: lawngreen;" href="./news.html">校园新闻</a></li>
				</ul>
			</div>
			<div class="header_right">
				<el-button @click="loginBtn" type="success" icon="el-icon-user-solid">登录</el-button>
				<el-button @click="registerBtn" type="success" icon="el-icon-takeaway-box">注册</el-button>
			</div>
		</div>
		<div class="section">
			<div class="section_1">校园新闻</div>
			<div class="section_2">首页 > 校园新闻 > 所有新闻</div>
		</div>
		<div class="newsList">
			<div class="newsList_nav">
				<el-button type="primary" icon="el-icon-arrow-left" @click="prevRow">上一页</el-button>
				<div style="width: 45%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-evenly;">
					<el-input style="width: 40%" v-model="news_name" placeholder="请输入标题"></el-input>
					<el-input style="width: 40%" v-model="news_issuer" placeholder="请输入发布人"></el-input>
					<el-button icon="el-icon-search" circle @click="search"></el-button>
				</div>
			</div>
			<div class="newsList_section">
				<el-table
				      :data="dataList"
				      style="width: 100%;"
						@row-click="clickrow">
				      <el-table-column
				        prop="id"
				        label="新闻编号"
				        width="150"
					  	type="index">
				      </el-table-column>
					  <el-table-column
					    label="封面图">
						  <template slot-scope="scope">
							<img :src="scope.row.news_image" style="height: 60px;width: 60px">
						  </template>
					  </el-table-column>
				      <el-table-column
				        prop="news_name"
				        label="新闻标题"
				        width="210">
				      </el-table-column>
				      <el-table-column
				        prop="news_issuer"
				        label="发布人"
						width="180">
				      </el-table-column>
					  <el-table-column
					    prop="news_time"
					    label="发布时间"
						width="220">
					  </el-table-column>
				    </el-table>
			</div>
			<div class="newsList_footer">
				<el-pagination
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-size="pagination.pageSize"
				layout="total, prev, pager, next"
				:total="pagination.total">
				</el-pagination>
			</div>
		</div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/jquery-3.6.1.js"></script>
<script src="../js/after_landing.js"></script>
<script>
	const vm = new Vue({
		el: '#app',
		data(){
			return {
				news_name : '',
				news_issuer : '',
				dataList: [],
				pagination: {//分页相关模型数据
					currentPage: 1,//当前页码
					pageSize:10,//每页显示的记录数
					total:0,//总记录数
				},
				news_image: '../img/defaultImage/222.jpg',
				userMsgList : [],
			}
		},
		created(){
			let username = getCookie("cookie_username")
			if (username !== null && username.length > 0){
				axios.get('/users/'+username).then((resp)=>{
					this.userMsgList = resp.data.data
					$('.header_center ul').append(`<li><a href="./personal_resume.html">简历</a></li>`)
					$('.header_center ul').append(`<li><a href="./personal_center.html">个人中心</a></li>`)
					$('.header_right').empty()
					let url = this.userMsgList.user_image
					$(".header_right").append(`<img style="width: 7%;margin-right: 5px" src="${url}">${username}`);
					$(".header_right").append(`<a style="text-decoration: none;color: #77838e;margin-left: 5px" href="/logins/logout">注销</a>`);
				})
			} else {
				$('.header_center ul li:gt(2)').remove()
			}
		},
		mounted(){
			this.getAll();
		},
		methods:{
			clickrow(row){
				window.location.replace("/pages/news_detail.html");
				window.sessionStorage.setItem('id',row.id);
				window.sessionStorage.setItem('path',document.location.pathname)
			},
			getAll(){
				axios.get('/news/'+this.pagination.currentPage+"/"+this.pagination.pageSize).then((resp)=>{
					this.dataList = resp.data.data.records;
					this.pagination.pageSize = resp.data.data.size;
					this.pagination.currentPage = resp.data.data.current;
					this.pagination.total = resp.data.data.total;
				})
			},
			prevRow(){
				document.location.href = "news.html"
			},
			loginBtn(){
				document.location.href = "login.html"
			},
			registerBtn(){
				document.location.href = "register.html"
			},
			handleCurrentChange(val) {
				//修改页码值为当前选中的页码值
				this.pagination.currentPage = val;
				//执行查询
				this.getAll();
			},
			search(){
				params = '?news_name='+this.news_name
				params += '&news_issuer='+this.news_issuer
			
				axios.get('/news/have/'+this.pagination.currentPage+"/"+this.pagination.pageSize+params).then((resp)=>{
					this.dataList = resp.data.data.records;
					this.pagination.pageSize = resp.data.data.size;
					this.pagination.currentPage = resp.data.data.current;
					this.pagination.total = resp.data.data.total;
				})
			}
		}
	})
</script>
</html>